<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item >意见管理</el-breadcrumb-item>
            <el-breadcrumb-item >意见编辑</el-breadcrumb-item>
        </el-breadcrumb>
               <el-row class="margintop20">
            <el-col>
                <el-steps :active="active" finish-status="success">
                     <el-step title="修改意见主题" description="欢迎踊跃指出我们的不足之处."></el-step>
                     <el-step title="修改意见内容" description="你的一次小小的指正,都将是我们莫大的进步."></el-step>
                     <el-step title="重新发表意见" description="感谢你的意见,欢迎再次指正."></el-step>
                </el-steps>
            </el-col>
            <el-col class="margintop20" >
                <div v-show="active==1" style="width:30%">
                    <el-form 
                        :model="form" 
                        :rules="rules"
                        ref="myform" 
                        label-width="100px"
                        label-position="top" 
                        class="myform">
                        <el-form-item label="意见标题" prop="title">
                            <el-input v-model="form.title"></el-input>
                        </el-form-item>
                        <el-form-item label="意见分类" prop="category">
                            <el-cascader
                                style="width:100%"
                                v-model="form.category"
                                :options="options"
                                @change="handleChange"></el-cascader>
                        </el-form-item>
                    </el-form>

                    <el-button type="primary" @click="gotonextone">下一步</el-button>
                </div>
                <div v-show="active==2">
                    <quill-editor 
                        v-model="form.content" 
                        ref="advisecontent" 
                        :options="editorOption" 
                        >
                    </quill-editor>
                    <div class="margintop20">
                        <el-button type="danger" @click="active--">上一步</el-button>
                        <el-button type="primary" @click="gotonext">下一步</el-button>
                    </div>
                </div>
                <div v-show="active==3">
                    <el-button type="danger" @click="active--">上一步</el-button>
                    <el-button type="success" @click="updateone">修改意见</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {advacecatetory} from "@/utils"
import {getadvisebyid,updateadvisebyid} from "@/api"

export default {
    data(){
        return {
            editorOption:{
                theme:'snow',
            },
            options:advacecatetory,
            active:1,
            rules:{
                title:[
                    {required:true,message:"请输入意见标题",trigger:"blur"}
                ],
                category:[
                    {required:true,message:"请选择意见分类",trigger:"change"}
                ]
            },
            form:{},
            _id:this.$route.params.id,
        }
    },
    methods:{
        handleChange(){

        },
        gotonextone(){
            this.$refs.myform.validate((valid)=>{
                if(valid){
                    this.active++;
                }else{
                    this.$message.error("请完善信息.")
                    return false;
                }
            })
        },
        gotonext(){  //点击下一步
            if(this.form.content){
                this.active++;
            }else{
                 this.$message.error("请完善意见内容.")
                return false;
            }
        },
        updateone(){
            this.form.category = this.form.category.join(",")
            updateadvisebyid(this.form)
            .then(res=>{
                if(res.type){  //如果type为1，表示成功，将路由跳转到添加列表页
                    this.$router.push({name:"adviselist"})
                }
            })
            .catch(err=>{

            })
        }
    },
    mounted(){

        getadvisebyid({
            _id:this.$route.params.id
        })
        .then(res=>{
            if(res.type){
                //把得到的数据展开
                this.form = {...this.form,...res.result,category:res.result.category.split(",")}
            }
        })
    }
}
</script>